<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		.imgx/*类样式.开始*/
		{
			width: 150px;
			height: 200px;
		}
		.mimgx
		{
			width: 50px;
			height: 50px;
		}
	</style>	
	<body>
		<center>
			<!--class类样式-->
			<img src="img/1.jpg" class="imgx"onclick="adds('m01','f01')"/>
			<img src="img/2.jpg" class="imgx"onclick="adds('m02','f02')"/>
			<img src="img/3.jpg" class="imgx"onclick="adds('m03','f03')"/>
			<img src="img/4.jpg" class="imgx"onclick="adds('m04','f04')"/>
		</center>
		<br>
		<!--在开始标签里面样式内嵌样式
			有优先权，优先于class,跟id-->
		<div style="width: 100%;height: 400px;text-align: center;">
			<img src="img/1.jpg" class="mimgx"/>
			<!--刻度尺-->
			<meter id="m01" max="100"value="0"></meter>
			<font id="f01">0</font>票
			<br>
			<!--刻度尺2-->
			<img src="img/2.jpg" class="mimgx"/>
			<meter id="m02" max="100"value="0"></meter>
			<font id="f02">0</font>票
			<br>
			<!--刻度尺3-->
			<img src="img/3.jpg" class="mimgx"/>
			<meter id="m03" max="100"value="0"></meter>
			<font id="f03">0</font>票
			<br>
			<!--刻度尺4-->
			<img src="img/4.jpg" class="mimgx"/>
			<meter id="m04" max="100"value="0"></meter>
			<font id="f04">0</font>票
			<br>
		</div>
	</body>
</html>
<script type="text/javascript">
	function adds(mid,pid)
	{
		//获取刻度尺对象
		var kd = document.getElementById(mid);
		//获取票数对象
		var pid = document.getElementById(pid);
		//将票数字符串转成数字
		//font需要用innerText获取值
		var pids = parseInt(pid.innerText);
		//刻度尺加票
		kd.value = kd.value + 10;
		//票数+1
		pid.innerText = pids + 10;
		if(pid.innerText>100){
			pid.innerText = pids;
			alert("票数已满！");}
	}
</script>
